<template>
            <dv-border-box-8 dur=10>
              <div class="bottom-left-box">
                <div>
                  <dv-border-box-5 :reverse="true" class="dv-border-box-self"></dv-border-box-5>
                </div>
                <div>
                  <dv-border-box-2  class="dv-border-box-self"></dv-border-box-2>
                </div>
                <div>
                  <dv-border-box-10  class="dv-border-box-self"></dv-border-box-10>
                </div>
                <div>
                  <dv-border-box-9  class="dv-border-box-self"></dv-border-box-9>
                </div>
                <div>
                  <dv-border-box-12  class="dv-border-box-self"></dv-border-box-12>
                </div>
                <div>
                  <dv-border-box-5 class="dv-border-box-self"></dv-border-box-5>
                </div>
              </div>
            </dv-border-box-8>
</template>

<script>
export default {

}
</script>

<style scoped lang="scss">
.bottom-left-box{
  width: 98%; /* 或者具体的宽度 */
  height: 95%;
    
  display: grid;
    grid-template-columns: repeat(3, 1fr); /* 定义三列，每列宽度相等 */
  grid-template-rows: repeat(2, 1fr);   /* 定义两行，每行高度相等 */
  gap: 10px;  

  .dv-border-box-self{
    margin: 10px;
  }
}
</style>